<html>
	<head>
	    <title>jQuery Adapter &mdash; CKEditor Sample</title>
		<meta content="text/html; charset=utf-8" http-equiv="content-type" />
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
		<script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
		<script type="text/javascript" src="js/ckeditor/adapters/jquery.js"></script>
		<script src="js/ckeditor/sample.js" type="text/javascript"></script>
		<link href="css/sample.css" rel="stylesheet" type="text/css" />
		<link type="text/css" href="css/ui/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
		<script type="text/javascript">
		//<![CDATA[
			$(function()
			{
				var config = {
					toolbar:
					[
						['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink'],
						['UIColor']
					]
				};

				// Initialize the editor.
				// Callback function can be passed and executed after full instance creation.
				$('.jquery_ckeditor').ckeditor(config);
			});
		//]]>
		</script>
		<script type="text/javascript">

			$(function(){
				$('#tabs').tabs();
            });
		</script>
		<script>
			$(function() {
				$( "#anasayfa").button({
				});
				$( "#kategoriler").button({
				});
				$( "#urunler").button({
				});
				$( "#haberler").button({
				});
				$( "#ayarlar").button({
				});
				$( "#cikis").button({
				});
				$( "#insert" )
				.button({
					icons: {
					primary: "ui-icon-plus"
					},
					text: true,
			    })
				.click(function(){
				    $("#tema").css("visibility","visible");
					$("#listeTema").css("visibility","hidden");
				});
				$( "#list" ).button({
					icons: {
					primary: "ui-icon-note"
					},
					text: true
			    })
				.click(function(){
				    $("#tema").css("visibility","hidden");
					$("#listeTema").css("visibility","visible");
				});
				$( "#kaydet" ).button({
					icons: {
					primary: "ui-icon-disk"
					},
					text: true
			    });
	
			});
	    </script>

        <style type="text/css">
			body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
			.demoHeaders { margin-top: 2em; }
			#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
			#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
			ul#icons {margin: 0; padding: 0;}
			ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
			ul#icons span.ui-icon {float: left; margin: 0 4px;}
			.demo{top:20px;position:absolute;}
			#toolbar {padding: 10px 4px;}
			#tabs{width:65%;position:absolute;top:20%}
			#insert{margin-left:55%;}
			#baslik{position:absolute;margin-top:2px;margin-bottom:2px;}
			#sag-menu{position:absolute;margin-left:67%;top:20%;width:20%;height:50%;}
			.sutun1{width:150px;}
			.girisler{width:700px;}
			div#users-contain { width: 1050px; margin: 20px 0; }
			div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
			div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
            label, input { display:block; }
			fieldset { padding:0; border:0; margin-top:25px; }

		</style>
	</head>
	
	<body>

    <div class="demo">
		<span id="toolbar" class="ui-widget-header ui-corner-all">
			<button id="anasayfa">AnaSayfa</button>
			<button id="kategoriler">Kategoriler</button>
			<button id="urunler">Urunler</button>
			<button id="haberler">Haberler</button>
			<button id="ayarlar">Ayarlar</button>
			<button id="cikis">Cikis</button>
		</span>
    </div>
	<hr/>
	<div id="insert">
		<span>Icerik Ekle</span>
	</div>
	<div id="list">
		<span>Icerik Listele</span>
	</div>
	<div id="tema" style="visibility:hidden;">
		<h2 id="baslik">Icerik Ekleme Ekrani</h2>		
		<div id="tabs">
				<ul>
					<li><a href="#tabs-1">Icerik Ekle</a></li>
					<li><a href="#tabs-2">Insert Content</a></li>
				</ul>
				<div id="tabs-1">
				<table class="girisler">
					<tr>
						<td class="sutun1">Icerik Basligi</td>
						<td><input type="text" name="icerikBaslik" style="width:65%;"></input></td>
					</tr>
					<tr>
						<td class="sutun1">Icerik Aciklamasi</td>
						<td><input type="text" name="icerikAciklama"style="width:95%;"></input></td>
					</tr>
					<tr>
						<td class="sutun1">Resim</td>
						<td><input type="file" name="icerikResim"style="width:85%;"></input></td>
					</tr>
				</table>
					<textarea class="jquery_ckeditor" cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
				</div>
				<div id="tabs-2">
				<table class="girisler">
					<tr>
						<td class="sutun1">Content Header</td>
						<td><input type="text" name="icerikBaslik" style="width:65%;"></input></td>
					</tr>
					<tr>
						<td class="sutun1">Content Description</td>
						<td><input type="text" name="icerikAciklama"style="width:95%;"></input></td>
					</tr>
					<tr>
						<td class="sutun1">Image</td>
						<td><input type="file" name="icerikResim"style="width:85%;"></input></td>
					</tr>
				</table>
					<textarea class="jquery_ckeditor" cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>

				</div>


			</div>

		<div id="sag-menu"  class= "ui-widget-content ui-corner-all">
			<div class="ui-widget-header ui-corner-all" style="margin-top:1px;">&nbsp;<br/>&nbsp;</div><br/>
			<span style="font-size:12;margin-left:5px;">Icerigi Kaydet:</span><button id="kaydet" style="margin-left:15px">Kaydet</button>
			<br>
			<br>
			<ul id="icons" class="ui-widget ui-helper-clearfix">
				<li class="ui-state-default ui-corner-all">
					Anahtar Kelimeler
					<span class="ui-icon ui-icon-tag" style="font-size:12;margin-left:5px;"></span>
				</li>		
			</ul>
			<textarea rows="10" style="width:90%;margin-left:5px;"></textarea>
		</div>
    </div>
     <div id="listeTema">
			<div id="users-contain" class="ui-widget">
				<h1>Icerik Listesi:</h1>
				<table id="users" class="ui-widget ui-widget-content">
					<thead>
						<tr class="ui-widget-header ">
							<th>Icerik</th>
							<th style="width:300px;">Aciklama</th>
							<th>Anahtar Kelimeler</th>
							<th>Duzenle</th>
							<th>Gizle</th>
							
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>John Doe</td>
							<td>john.doe@example.com</td>
							<td>johndoe1</td>
							<td>
								<ul id="icons" class="ui-widget ui-helper-clearfix">
									<li class="ui-state-default ui-corner-all">
										<span class="ui-icon ui-icon-pencil" style="font-size:12;margin-left:5px;"></span>
									</li>		
								</ul>
							</td>
							<td>
								<ul id="icons" class="ui-widget ui-helper-clearfix">
									<li class="ui-state-default ui-corner-all">
										<span class="ui-icon ui-icon-close" style="font-size:12;margin-left:5px;"></span>
									</li>		
								</ul>
							</td>
						</tr>
					</tbody>
				</table>
			</div>	
	</body>
</html>